
<script>
	export default{
		props: ['value'],
		render(){
			return this.$scopedSlots.default({
				tags: this.value,
				removeTag: this.removeTag,
				attrs:{
					value: this.newTag
				},
				listeners:{
					input:(e)=>{
						console.log(this.newTag)
						this.newTag = e.target.value
					},
					keydown:(e)=>{
						if(e.keyCode === 13){
							e.preventDefault()
							this.addTag()
						}
					}
				}
			})
		},
		data(){
			return{
				newTag: ''
			}
		},
		methods:{
			removeTag(tag){
				this.$emit('input', this.value.filter(item => item !== tag))
			},
			addTag(){
				if(this.value.includes(this.newTag.trim())){
					return 
				}
				this.$emit('input', [...this.value,this.newTag])
				this.newTag = ''
			}
		}
	}
</script>
